/*
 * @Author: zhangweixin 
 * @Date: 2018-11-29 15:15:45 
 * @Last Modified by: zhangweixin
 * @Last Modified time: 2018-11-30 14:36:04
 */
import React from 'react';
import {NavLink} from 'react-router-dom';
import homeLinkIcon from 'imgs/icon-nav-home-default.png';
import homeActiveIcon from 'imgs/icon-nav-home-active.png';
import cartLinkIcon from 'imgs/icon-nav-cart-default.png';
import cartActiveIcon from 'imgs/icon-nav-cart-active.png';
import userLinkIcon from 'imgs/icon-nav-user-default.png';
import userActiveIcon from 'imgs/icon-nav-user-active.png';

import style from './style.less';
import className from 'classnames/bind';
const classMap = className.bind(style);
console.log(style)
const render = function(){
  return(
    <footer className={style["footer-nav-container"]}>
      <NavLink exact activeClassName={style["active"]} to="/" className={style["footer-nav-item"]} onClick={this.handleLinkClick}>
        <div className={style["footer-nav-item-img-box"]}>
          <img src={homeLinkIcon} className={style["default"]} alt=""/>
          <img src={homeActiveIcon} className={style["active"]}/>
        </div>
        <div className={style["footer-nav-item-text"]}>首页</div>
      </NavLink>
      <NavLink activeClassName={style["active"]} to="/cart" className={style["footer-nav-item"]} onClick={this.handleLinkClick}>
        <div className={style["footer-nav-item-img-box"]}>
          <img src={cartLinkIcon} className={style["default"]} alt=""/>
          <img src={cartActiveIcon} className={style["active"]}/>
        </div>
        <div className={style["footer-nav-item-text"]}>购物车</div>
      </NavLink>
      <NavLink activeClassName={style["active"]} to="/userCenter" className={style["footer-nav-item"]} onClick={this.handleLinkClick}>
        <div className={style["footer-nav-item-img-box"]}>
          <img src={userLinkIcon} className={style["default"]} alt=""/>
          <img src={userActiveIcon} className={style["active"]}/>
        </div>
        <div className={style["footer-nav-item-text"]}>我的</div>
      </NavLink>
    </footer>
  )
}
export default render;